<template>
  <div class="forum-item-outer">
      <div class="forum-item-head">
        <span id="forum-title">{{forum.title}}</span>
        <span id="update-time-span">{{forum.createAt}}</span>
      </div>
      <div class="forum-item-content">
        {{forum.content}}
      </div>
      <div class="forum-item-tail">
        <span class="forum-item-tail">
          <el-icon  size="10"><View /></el-icon>&nbsp;{{  forum.browserNumber  }}
        </span>
        <span>
          <el-icon style="position: relative;top:2px" size="10"><Star /></el-icon>&nbsp;{{  forum.collectNumber  }}
        </span>
        <span>
          <el-icon style="position: relative;top:2px" size="10"><Coin /></el-icon>&nbsp;{{ forum.coinNumber }} 
        </span>
      </div>
  </div>  
</template>
  
<script>
export default {
  props:{
      "forum":Object,
  },
  mounted(){
    let createAt = this.forum.id
    let date = createAt.substring(0, 8)
    let timestamp = parseInt(date,16) * 1000
    this.forum.createAt = new Date(timestamp).format("yyyy-MM-dd hh:mm:ss")
  }
}

</script>
<style>
.forum-item-outer{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: white;
  box-shadow: 0px 0px 5px 5px #ddd;
  border-radius: 10px;
}

#forum-title{
  max-width: max-content;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 150px;
  text-align: left;
}

.forum-item-head{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#update-time-span{
  font-size: smaller;
}

.forum-item-content{
  text-align: left;
  font-size: small;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.forum-item-tail{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-size: 8px;
}
</style>
  